<template>
  <div class="">
    <div class="radiobox">
      <div class="">
        <div class="card_label">
          <div
            v-if="requireFlag"
            class="require_icon"
          >*</div>

          <div class="label_txt">
            <div>{{ label }}：</div>
            <div
              class="voice_icon"
              @click="clickRecord(field)"
            ><img
                class="voice_icon_img"
                src="@/assets/images/voice_icon.png"
              />{{ voiceText }}</div>
          </div>
        </div>
        <div class="card_select">
          <div class="select_time">
            <textarea
              v-model="txtVal"
              class="text_val"
              placeholder="请输入备注内容"
              rows="3"
            ></textarea>
          </div>
          <div
            class="fast_select"
            v-if="field == 'followNote' && (this.$parent.formData.followResult == 'follow' || this.$parent.formData.followResult == 'inFollow')"
          >
            <div
              class="fast_select_item"
              v-for="(item, index) in this.$parent.formData.followResult == 'follow'?fastList:fastList1"
              :key="index"
              @click="handleSelect(index)"
              :class="faskIndex == index ? 'active' : ''"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <Voice
      :record-box="recordBox"
      @translateResult="getWords"
      @changeRecordBox="closeRecord"
    />
  </div>
</template>

<script>
import Voice from './voice.vue'
import commonApi from '../../../api/commonApi'

export default {
  name: 'SelectInput',
  components: { Voice },
  props: {
    label: {
      type: String,
      default: null,
    },
    field: {
      type: String,
      default: null,
    },

    requireFlag: {
      type: Boolean,
      default: false,
    },
    voiceText: {
      type: String,
      default: '录音',
    }
  },
  data() {
    return {
      recordBox: false,
      recordName: '',
      txtVal: '',
      fastList: [
        {
          name: '近期有进店',
          check: false,
        },
        {
          name: '保养未到期，正常维系',
          check: false,
        },
        {
          name: '预约成功，还未进店',
          check: false,
        },
        {
          name: '意向较强，重点跟进',
          check: false,
        },
        {
          name: '进店维修不保养',
          check: false,
        },
        {
          name: '自行预约',
          check: false,
        },
        {
          name: '意向一般，无有效沟通',
          check: false,
        },
        {
          name: '一次电话未接通/挂断/关机，后续跟进',
          check: false,
        },
      ],
      fastList1: [
        {
          name: '近期有进店',
          check: false,
        },
        {
          name: '自行预约',
          check: false,
        },
      ],
      faskIndex: null,
    }
  },
  watch: {
    txtVal(val) {
      this.$emit('getFieldVal', this.field, val)
    },
  },
  mounted() {
    this.getFollowNotes()
  },

  methods: {
    handleSelect(index) {
      this.faskIndex = index
      this.txtVal = this.fastList[index].name
    },
    // 点击录音
    clickRecord(name) {
      this.recordName = name
      this.recordBox = true
    },
    // 获取录音转文字
    getWords(data) {
      // this.$emit('getfieldVal',  + data)
      this.txtVal = data
      this.$emit('getFieldVal', this.field, data)
      // formdata[this.recordName] = formdata[this.recordName] + data
    },
    // 关闭录音弹窗
    closeRecord(data) {
      this.recordBox = data
    },
    getFollowNotes() {
      this.fastList = []
      commonApi
        .getBaseCode({
          key: '持续跟进快速选填内容',
        })
        .then((res) => {
          console.log('res=>',res)
          if (res.data) {
            res.data.forEach((item, index) => {
              this.fastList.push({
                name: item.name,
                check: false
              })
            })
          }
        })
    }
  },
}
</script>

<style lang="less" scoped>
.followInfo {
  position: fixed;
  width: 100%;
  height: 70vh;
  overflow: auto;
  bottom: 0;
  left: 0;
  z-index: 10;
  box-shadow: 0px 1px 0px 0px rgba(40, 47, 56, 0.04);
  border-radius: 10px 10px 0px 0px;
  background: #fff;
  .followInfo_title {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
  }
}
.radiobox {
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.02);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #f4f4f6;
  padding: 8px 17px 20px 17px;
  .card_label {
    display: flex;
    margin-bottom: 10px;
    .require_icon {
      font-weight: 400;
      font-size: 12px;
      color: #ff4848;
    }
    .label_txt {
      font-weight: 400;
      font-size: 12px;
      width: 100%;
      color: #86909c;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .voice_icon {
        font-weight: 400;
        font-size: 12px;
        display: flex;
        align-items: center;
        color: #165dff;
        .voice_icon_img {
          width: 12px;
        }
      }
    }
  }
  .card_select {
    display: flex;
    flex-wrap: wrap;
    .radio_item {
      width: 33%;
      display: flex;
      align-items: center;
      .item_icon {
        width: 18px;
        display: block;
        margin-right: 10px;
      }
      .item_name {
        font-weight: 600;
        font-size: 12px;
        color: #2f2f2f;
      }
    }
    .select_time {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .time_val {
        font-weight: 700;
        font-size: 12px;
        color: #2f2f2f;
      }
      .icon-right {
        font-size: 16px;
        color: #c9cdd4;
      }
      .text_val {
        width: 100%;
        background: #f2f3f5;
        border: none;
        font-weight: 300;
        font-size: 10px;
        color: #333;
        display: block;
        padding: 8px 10px;
        &::placeholder {
          color: #c9cdd4;
        }
      }
    }
    .fast_select {
      display: flex;
      flex-wrap: wrap;
      padding-top: 20px;
      .fast_select_item {
        color: #666;
        padding: 5px 10px;
        margin-right: 10px;
        font-size: 12px;
        color: #4e5969;
        border-radius: 32px 32px 32px 32px;
        background: #f7f7f7;
        margin-bottom: 10px;
        &.active {
          color: #165dff;
          background: #d8e3ff;
        }
      }
    }
  }
}
</style>
